<template>
  <div class="Coupon">
    <div class="title">
      <h3>领取优惠劵</h3>
      <span>查看更多<van-icon name="arrow" /></span>
    </div>
    <div class="Cou_content">
      <div class="Cou_item" v-for="item in coupons" :key="item.id">
        <div class="left">
          <section class="left_mid">
            <div class="m_t">
              <span class="l_icon">￥</span>
              <span class="l_p">{{ item.money.replace(".00", "") }}</span>
            </div>
            <span class="m_b"
              >满{{ item.minPrice.replace(".00", "") }}元可用</span
            >
          </section>
        </div>
        <div class="cloumn"><span>领</span><span>取</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FxhDemoCoupon",
  props: ["coupons"],
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.Coupon {
  width: 347px;
  margin: 0px auto;
  margin-top: 10px;
  height: 119px;
  border-radius: 5px;
  background: white;
  overflow: hidden;
  .title {
    @include between;
    width: 345px;
    height: 46px;
    h3 {
      line-height: 46px;
      margin-left: 10px;
    }
    span {
      line-height: 46px;
      margin-right: 10px;
    }
  }
  .Cou_content {
    @include flex;
    height: 57px;
    margin-left: 20px;
    width: 323px;
    overflow-x: scroll;
  }

  .Cou_item {
    width: 114px;
    margin-right: 10px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    border-radius: 5px;
    .left {
      width: 86px;
      height: 54px;
      text-align: center;
      background: #ffd8e7;
      position: relative;
      border-radius: 5px;
      &::before {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #fff;
        left: -4px;
        top: 21px;
      }
      .left_mid {
        margin-left: 13px;
        margin-top: 10px;
        width: 50px;
        height: 35px;
        @include cloumn;
        .m_t {
          @include center;
          width: 50px;
          height: 21px;
          .l_icon {
            width: 9px;
            height: 11px;
            border-radius: 50%;
            background-color: #ff62a9;
            text-align: center;
            font-size: 9px;
            color: #fff;
          }
          .l_p {
            font-size: 21px;
            line-height: 21px;
            color: #ff448f !important;
            font-weight: 600;
          }
        }
        .m_b {
          text-align: center;
          height: 13px;
          font-size: 10px;
          color: #ff448f
        }
      }
    }
    .cloumn {
      @include cloumn-center;
      width: 27px;
      height: 53px;
      background-color: #ff62a9;
      color: #fff;
      font-size: 11px;
      border-radius: 0 6px 6px 0;
    }
  }
}
</style>
